<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>数据统计 -- 综合分析</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <style>


        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        @-moz-document url-prefix() {
            fieldset {
                display: table-cell;
            }
        }

        .custom-btn {
            width: 147px;
            height: 88px;
            box-shadow: 1px 1px 1px #888888;
            margin-left: 10px;
            margin-top: 20px;
            text-align: center;
            padding-top: 24px;
        }

        .custom-btn-num-text {
            color: white;
            font-size: 20px;
            font-family: fantasy;
            margin-top: 13px;
        }

    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">


    <form class="form-inline" name="myForm" style="margin-top: 110px;margin-bottom:20px;text-align: center">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''"  class="form-control input-sm" type="text" placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
            <div class="form-group">
                <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="渠道名称">
            </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>

        <div class="form-group">
            <input id="beginTimeInput" class="form-control input-sm" type="text" placeholder="开始时间">
        </div>
        <div class="form-group">
            <input id="endTimeInput" class="form-control input-sm" type="text" placeholder="结束时间">
        </div>
        <button type="button" class="btn btn-success btn-sm" @click="selectData" title="">查询
        </button>
    </form>


    <form class="form-inline" style="margin-top: 40px;margin-bottom:20px;text-align: center">
        <div class="form-group custom-btn" style="background: url('/SpringBoot_Dubbo_web/static/image/synthesis/Back1.png')">
            <div  style="" class="custom-btn-num-text">{{resultData.registerNum}}</div>
        </div>
        <div class="form-group custom-btn" style="background: url('/SpringBoot_Dubbo_web/static/image/synthesis/Back2.png')">
            <div  style="" class="custom-btn-num-text">{{resultData.bindCarNum}}</div>
        </div>
        <div class="form-group custom-btn" style="background: url('/SpringBoot_Dubbo_web/static/image/synthesis/Back3.png')">
            <div  style="" class="custom-btn-num-text">{{resultData.expNum}}</div>
        </div>
        <div class="form-group custom-btn" style="background: url('/SpringBoot_Dubbo_web/static/image/synthesis/Back4.png')">
            <div  style="" class="custom-btn-num-text">{{resultData.dingYanNum}}</div>
        </div>
        <div class="form-group custom-btn" style="background: url('/SpringBoot_Dubbo_web/static/image/synthesis/Back5.png')">
            <div  style="" class="custom-btn-num-text">{{resultData.payNum}}</div>
        </div>
        <div class="form-group custom-btn" style="background: url('/SpringBoot_Dubbo_web/static/image/synthesis/Back6.png')">
            <div  style="" class="custom-btn-num-text">{{resultData.payCountNum}}</div>
        </div>
        <div class="form-group custom-btn" style="background: url('/SpringBoot_Dubbo_web/static/image/synthesis/Back7.png')">
            <div  style="" class="custom-btn-num-text">{{managerPayAmt}}</div>
        </div>
    </form>

</div>
</body>
<script src=${contextPath}/static/layer/layer.js></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            queryModel : {
                stringMap : {

                }
            },
            resultData : {
                registerNum : "",
                bindCarNum : "",
                expNum : "",
                dingYanNum : "",
                payNum : "",
                payCountNum : "",
                payAmt : "",
            }

        },
        computed: {
            managerPayAmt : function () {
                var payAmt = this.resultData.payAmt;
                if (!payAmt) {
                    return '0元';
                }
                if(payAmt>10000) {
                    return (payAmt/10000).toFixed(2) + "万";
                }
                return payAmt
            }  
        },
        methods: {
             selectData : function () {
                 var quXianName = $("#quXianNameInput").val();
                 var channelName = $("#channelNameInput").val();
                 var empName = $("#empNameInput").val();
                 var beginTime = $("#beginTimeInput").val();
                 var endTime = $("#endTimeInput").val();
                layer.load(1)
                $.ajax({
                    url: '${contextPath}/page/getSynthesisSelect',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap : {
                            quXianName : quXianName,
                            channelName : channelName,
                            empName : empName,
                            beginTime : beginTime,
                            endTime : endTime,
                        }
                    },
                    success: function (data) {
                        if (data.success) {
                            var result = data.data;
                            var numResult = result.numResult;
                            app.resultData = numResult;
                        } else {
                            layer.msg(data.message);
                        }
                        layer.closeAll('loading')
                    },
                    error: function (error) {
                        layer.closeAll('loading')
                        layer.msg("网络连接失败")
                    }
                })
            },
            goCgtCustPage : function () {
                window.location.href = '/SpringBoot_Dubbo_web/sys/user/home#page/clouderpClienteleTobacco'
            }

        }

    });



app.selectData();




    //var nowDate = new Date();
    //nowDate.setMonth(nowDate.getMonth() - 1);
    $('#beginTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        minView: 2,
        //startDate: nowDate,
        format: "yyyy-mm-dd",
    }).on('changeDate', function (e) {
        var startTime = e.date;
        $('#endTimeInput').datetimepicker('setStartDate', startTime);
    });
    $('#endTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        minView: 2,
        format: "yyyy-mm-dd",
    }).on('changeDate', function (e) {
        var endTime = e.date;
        $('#beginTimeInput').datetimepicker('setEndDate', endTime);
    });



    var exportExcel = function () {
        if (app.orderList.length <= 0) {
            layer.msg("当前表格没有数据");
            return
        }
        $("#exportExcelData").val(JSON.stringify(app.orderList))
        $("#exportExcel").submit();

    }

    function numAdd(num1, num2) {
        if (num1 == null || num1 == undefined || num1 == "") {
            return num2;
        }
        var baseNum, baseNum1, baseNum2;
        try {
            baseNum1 = num1.toString().split(".")[1].length;
        } catch (e) {
            baseNum1 = 0;
        }
        try {
            baseNum2 = num2.toString().split(".")[1].length;
        } catch (e) {
            baseNum2 = 0;
        }
        baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
        var precision = (baseNum1 >= baseNum2) ? baseNum1 : baseNum2;//精度
        return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
        ;
    };

    var formatDate = function (data) {
        if (data < 10) {
            data = "0" + data
        }
        return data
    }


    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">

    var selectEmpNameToSelected = function (channelName) {
        $.ajax({
            url: '${contextPath}/checking/selectEmpNameToSelected?channelName=' + channelName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#empNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectEmpNameToSelected('')

    var selectChannelNameToSelected = function (quXianName) {
        $.ajax({
            url: '${contextPath}/checking/selectChannelNameToSelected?quXianName=' + quXianName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#channelNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                            selectEmpNameToSelected(suggestion.value)
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectChannelNameToSelected('')
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    $.ajax({
        url: '${contextPath}/checking/selectQuXianNameToSelected',
        success: function (data) {
            if (data.success) {
                var countries = data.data
                $('#quXianNameInput').autocomplete({
                    lookup: countries,
                    onSelect: function (suggestion) {
                        //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        selectChannelNameToSelected(suggestion.value)
                    },
                    width: 200,
                    minChars: 0,
                });
            }
        }
    })
    </shiro:hasPermission>
    </shiro:lacksPermission>

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

    var uploadExcelBindCar = function () {
        $("#uplaodExcelFileContent").removeClass("hide")
        this.payQrCodeModalId = layer.open({
            type: 1,
            title: '上传客户信息文件',
            closeBtn: 1,
            area: ['300px', '300px'],
            skin: 'yourclass',
            content: $("#uplaodExcelFileContent"),
            end: function () {
                $("#uplaodExcelFileContent").addClass("hide")
            }
        });
    }
    


    var uploadExcel = function () {
        var excel = $("[name = 'excelInput']:input")[0].files[0];

        //console.log(excel.name.substr(excel.name.lastIndexOf('.')))
        //console.log(excel.size)

        if (excel == undefined) {
            layer.msg("请选择excel文件")
            return
        }
        if (excel.name.substr(excel.name.lastIndexOf('.')) != '.xls') {
            layer.msg("选择的文件不是excel类型")
            return
        }
        if (excel.size > 1048576) {
            layer.msg("选择的excel大于1Mb")
            return
        }
        var fm = new FormData();
        fm.append('excel', excel);
        layer.load(1)
        $.ajax(
            {
                url: '${contextPath}/page/uploadExcel',
                type: 'POST',
                data: fm,
                contentType: false, //禁止设置请求类型
                processData: false, //禁止jquery对DAta数据的处理,默认会处理
                //禁止的原因是,FormData已经帮我们做了处理
                success: function (data) {
                    //测试是否成功
                    //但需要你后端有返回值
                    //console.log(data);
                    if (data.success) {
                        //console.log(data.data);
                        $('#getResultFileNameInput').val(data.data)
                        layer.msg('上传成功--请保存文件名，稍后获取结果');
                    } else {
                        layer.msg('上传失败，稍后再试');
                    }
                    layer.closeAll('loading')
                },
                error: function (error) {
                    layer.msg("网络连接失败");
                    layer.closeAll('loading')
                }
            }
        );
    }


    var getUploadResult = function () {
        var fileName = $('#getResultFileNameInput').val();
        if(fileName == "") {
            layer.msg("请输入要获取的文件名称")
            $('#getResultFileNameInput').focus()
            return
        }

        if (fileName.substr(fileName.lastIndexOf('.')) != '.xls') {
            layer.msg("要获取的文件名称不对，请确认输入")
            $('#getResultFileNameInput').focus()
            return
        }
        layer.load(1)
        $.ajax(
            {
                url: '${contextPath}/page/examineUploadExcelResultIsExists',
                type: 'POST',
                data: {
                    resultFileName : fileName,
                },
                dataType : 'json',
                success: function (data) {
                    layer.closeAll('loading')
                    if (!data.success) {
                        layer.msg('文件没有找到或者正在处理，请稍后再试');
                    } else {
                        $('#getUploadExcelResultForm').submit()
                    }

                },
                error: function (error) {
                    //console.log(error)
                    layer.msg("网络连接失败");
                    layer.closeAll('loading')
                }
            }
        );
    }


    var payNoPayOrder = function () {
        if (app.onPayCheckedValues.length == 0) {
            layer.msg("没有选择未支付订单");
            return;
        }
        var orders = [];
        $(app.onPayCheckedValues).each(function (key, val) {
            orders.push(app.orderList[val]);
        })
        var indx = layer.confirm('确定要支付选择的' + app.onPayCheckedValues.length + '条订单吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {

            layer.close(indx)
            app.onPayCheckedValues = []
            var successOrderCount = 0;
            layer.load(1)
            //修改订单状态
            $(orders).each(function (key, value) {
                $.ajax({
                    url: '${contextPath}/supermarket/httpPost',
                    type: 'post',
                    dataType: 'json',
                    async : false,
                    data: {
                        url: "http://app1:23912/clouderp-cgt-order-rest/api/cgt/order/autoDk",
                        stringMap: {
                            custCode: value.custCode,
                        }
                    },
                    success: function (data) {
                        //console.log(data)
                        if (!data.data) {
                            return
                        }
                        //修改订单状态
                        value.payStatusStr = '支付成功'
                        successOrderCount +=1;
                    }
                    ,
                    error: function (error) {
                    }
                });


            })
            layer.closeAll('loading')
            layer.msg("成功支付："+successOrderCount +"条订单")

        }, function () {
        });
    }
</script>
</html>





